<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>zepto入门</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <style type="text/css">
      #btn{
          width: 200px;
          height: 200px;
          background: #ff0;
          text-align: center;
          line-height: 200px;
          margin: 100px auto;
      }
  </style>
</head>
<body>
<!--
    * 什么是zepto.js
         概念： 移动端开发框架；API及语句同jquery相似，但文件更小(可压缩至8KB)。
                    是目前功能完备的库中，最小的一个。
    * zepto.js特点
        1、针对的是移动端
        2、轻量级，压缩版本只有8KB
        3、语法大部分同jquery一样，学习成本低，上手快。
        4、响应，执行快。
        5、同jquery一样都是以$为核心函数。

-->
<div id="btn">hello world</div>
<script type="text/javascript" src="../js/zepto.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/touch.js" charset="utf-8"></script>
<script type="text/javascript">
  $(function () {
    $('#btn').on('touchstart',function () {
      alert('touch被触发')
      $('body').append('<p>新增标签</p>')
    })
  })
</script>
</body>
</html>
